{% extends "base.html" %}

{% block title %}首页 - 鲍鱼数据分析系统{% endblock %}

{% block content %}
<div class="container">
    <!-- 欢迎信息和图表 -->
    <div class="row mb-4">
        <div class="col-md-6 mb-3">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">欢迎使用：{{ username }}</h5>
                </div>
                <div class="card-body">
                    <p>您可以使用本系统分析鲍鱼数据，预测年龄，以及查看各类统计信息。</p>
                    <a href="/predict" class="btn btn-primary">预测鲍鱼年龄</a>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">鲍鱼年龄分布</h5>
                </div>
                <div class="card-body text-center">
                    <img src="data:image/png;base64,{{ chart_base64 }}" alt="年龄分布图" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">数据统计</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 text-center mb-3">
                            <h3 class="text-primary">{{ stats.total }}</h3>
                            <p class="text-muted">总记录数</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <h3 class="text-success">{{ stats.male }}</h3>
                            <p class="text-muted">雄性数量</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <h3 class="text-danger">{{ stats.female }}</h3>
                            <p class="text-muted">雌性数量</p>
                        </div>
                        <div class="col-md-3 text-center mb-3">
                            <h3 class="text-warning">{{ stats.infant }}</h3>
                            <p class="text-muted">幼体数量</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 text-center mb-3">
                            <h3 class="text-success">{{ stats.avg_age }}</h3>
                            <p class="text-muted">平均年龄</p>
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <h3 class="text-danger">{{ stats.min_age }}</h3>
                            <p class="text-muted">最小年龄</p>
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <h3 class="text-primary">{{ stats.max_age }}</h3>
                            <p class="text-muted">最大年龄</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">鲍鱼数据列表</h5>
            <div>
                <a href="/search" class="btn btn-sm btn-light">高级查询</a>
                <a href="/add" class="btn btn-sm btn-success ms-2">添加记录</a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>性别</th>
                            <th>长度</th>
                            <th>直径</th>
                            <th>高度</th>
                            <th>整体重量</th>
                            <th>去壳重量</th>
                            <th>内脏重量</th>
                            <th>壳重量</th>
                            <th>环数(年龄)</th>
                            <th>线性回归预测</th>
                            <th>决策树预测</th>
                            <th>随机森林预测</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in abalone_data %}
                        <tr>
                            <td>{{ item.id }}</td>
                            <td>
                                {% if item.sex == 'M' %}
                                    <span class="badge bg-primary">雄性</span>
                                {% elif item.sex == 'F' %}
                                    <span class="badge bg-danger">雌性</span>
                                {% else %}
                                    <span class="badge bg-warning">幼体</span>
                                {% endif %}
                            </td>
                            <td>{{ item.length }}</td>
                            <td>{{ item.diameter }}</td>
                            <td>{{ item.height }}</td>
                            <td>{{ item.whole_weight }}</td>
                            <td>{{ item.shucked_weight }}</td>
                            <td>{{ item.viscera_weight }}</td>
                            <td>{{ item.shell_weight }}</td>
                            <td>
                                {% if item.rings > 15 %}
                                    <span class="badge bg-danger">{{ item.rings }}</span>
                                {% elif item.rings > 10 %}
                                    <span class="badge bg-warning">{{ item.rings }}</span>
                                {% else %}
                                    <span class="badge bg-success">{{ item.rings }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if item.predicted_rings_LR %}
                                    <span class="badge bg-info">{{ item.predicted_rings_LR }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">未预测</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if item.predicted_rings_DT_R %}
                                    <span class="badge bg-info">{{ item.predicted_rings_DT_R }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">未预测</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if item.predicted_rings_RF_R %}
                                    <span class="badge bg-info">{{ item.predicted_rings_RF_R }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">未预测</span>
                                {% endif %}
                            </td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary">详情</button>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="14" class="text-center">暂无数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页控件 -->
            <nav>
                <ul class="pagination justify-content-center">
                    {% if page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('index.index', page=page-1) }}">上一页</a>
                    </li>
                    {% endif %}

                    {% for p in pages %}
                    <li class="page-item {% if p == page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('index.index', page=p) }}">{{ p }}</a>
                    </li>
                    {% endfor %}

                    {% if page < total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('index.index', page=page+1) }}">下一页</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>

            <p class="text-muted text-center">
                显示 {{ page * per_page - per_page + 1 }}-{{ [page * per_page, total]|min }} 条，共 {{ total }} 条记录
            </p>
        </div>
    </div>
</div>
{% endblock %}